<template>
  <el-dialog :before-close="closeDialog" :visible.sync="dialogVisible" title="权限审批" width="80%" @open="openDialog">
    <!-- 详情 -->
    <detail-div :auth-id="authId"/>
    <div style="margin: 20px">
      <el-form :model="authApprove">
        <!-- 审批说明 -->
        <el-form-item label-width="100px" label="审批说明">
          <el-switch v-model="authApprove.isAgree" active-text="同意" inactive-text="拒绝"/>
          <el-input v-model="authApprove.approveRemark" type="textarea" style="width: 100%"/>
        </el-form-item>
      </el-form>
    </div>
    <div style="height: 30px">
      <div style="float: right">
        <el-button :disabled="approveButtonDisabled" type="primary" @click="approve()">审 批</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import DetailDiv from "@/views/auth/apply/detailDiv.vue";
import {approve} from "@/api/auth/auth";

export default {
  name: "ApproveDialog",
  components: {DetailDiv},
  props: {
    dialogVisible: {type: Boolean, default: false},
    authId: {type: Number, default: null}
  },

  data() {
    return {
      approveButtonDisabled: false,
      authApprove: this.resetAuthApprove()
    }
  },

  methods: {
    resetAuthApprove() {
      return {
        authId: this.authId,
        isAgree: false,
        approveRemark: null,
      }
    },

    /**
     * 打开窗口
     */
    openDialog() {
      this.authApprove = this.resetAuthApprove()
    },

    /**
     * 关闭窗口
     */
    closeDialog() {
      this.$parent.approveDialogVisible = false
      this.$parent.page()
    },

    /**
     * 审批
     */
    approve() {
      this.approveButtonDisabled = true
      this.authApprove.isAgree = this.authApprove.isAgree ? 1 : 0
      approve(this.authApprove).then(() => {
        this.$message({message: "上线审批成功", type: "success"})
        this.closeDialog()
        this.approveButtonDisabled = false
      })
    }
  }
}
</script>

<style scoped>

</style>
